<template>
  <view class="contract uni-flex-column">
    <CustomNavBar class="navbar" title="服务协商">
      <template v-slot:left>
        <view class="back uni-flex uni-align-center uni-justify-center" @click="goBack"><uni-icons type="left"
            size="20"></uni-icons></view>
      </template>
    </CustomNavBar>
    <view class="box_1 uni-flex-item">
      <view class="text1">此订单由服务人员<text class="active">{{username}}</text>与您发起的服务协商订单</view>
      <view class="text2">服务协商编号：{{orderCon.negotiateId}}</view>
      <view class="goods">
        <view class="uni-flex service" v-for="item in orderCon.negotiateServices" :key="item.itemId">
          <image :src="item.itemImg" mode="aspectFill" class="img"></image>
          <view class="right uni-flex-item">
            <view class="top uni-flex uni-align-center uni-justify-between">
              <text class="titleL">{{item.itemName}}</text>
              <text class="titleR">¥<text class="titleL">{{item.itemPrice}}</text></text>
            </view>
            <view class="center">{{item.itemDes}}</view>
            <view class="under" @click="openServiceDetail(item.itemId)">
              <text class="underText">查看服务内容</text>
              <uni-icons type="right" size="10"></uni-icons>
            </view>
          </view>
        </view>
			</view>
      <view class="desc-content">
        注意：服务协商订单无法使用平台优惠，如使用优惠请在<text class="orage">优派</text>中下单
      </view>
    </view>
    <view class="uni-flex uni-justify-between bottom uni-align-center">
      <view class="uni-flex uni-align-center">
        <text class="text2">合计</text>
        <text class="text1">¥{{orderCon.paymentAmount}}</text>
      </view>
      <text class="pay_btn" @click="openOrder">同意并付款</text>
    </view>
  </view>
</template>

<script setup>
import CustomNavBar from '@/components/custom-navbar/index.vue';
import { onLoad } from "@dcloudio/uni-app";
import {
  ref,
  reactive,
  onUnmounted,
  watch,
  getCurrentInstance,
  onMounted
} from "vue";
import {
  orderDetail
} from "@/api/serviceNegotiate.js";
// 响应式数据
const orderId = ref('');
const username = ref('');
const orderCon = ref({});
const goBack = () => {
  uni.navigateBack({
    delta: 1
  })
};
const openServiceDetail = (id) => {
  uni.navigateTo({
    url: "/pages/viewSonic/viewSonicDetail?id=" + id
  });
}
const openOrder = () =>{
  uni.navigateTo({
    url: "/pages/order/consumerOrder/placeOrder?id=" + orderId.value
  });
}
const getOrderDetail = async () => {
	const res = await orderDetail(orderId.value);
	if (res.code === 200) {
		orderCon.value = res.data;
	}
};
onLoad((options) => {
	username.value = options.username
  orderId.value = options.orderId
	getOrderDetail();
});
</script>

<style scoped lang="scss">
.contract {
  height: 100vh;
  background: linear-gradient(180deg, #EAF3FF 0%, #F9F9F9 100%);

  .navbar {
    width: 100%;
  }

  .back {
    width: 44rpx;
    height: 44rpx;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
  }
}

.box_1 {
  overflow-y: auto;
  padding: 38rpx 24rpx 0;
  .text1{
    font-size: 30rpx;
    color: #333333;
    font-weight: 500;
  }
  .text2{
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    margin-top:24rpx;
  }
  .active {
    color: #2F80ED;
  }

  .goods {
    margin: 24rpx 0;
    padding: 31rpx 35rpx;
    background: #fff;
    border-radius: 20rpx;
    box-sizing: border-box;

    .service {
      margin-bottom: 24rpx;
      .img{
        width: 137rpx;
        height: 137rpx;
        margin-right:20rpx;
      }
      .right{
        .titleL{
          font-weight: 500;
          font-size: 34rpx;
          color: #333333;
        }
        .titleR{
          font-weight: 500;
          font-size: 20rpx;
          color: #333333;
        }
      }
      .center{
        margin:8rpx 0 15rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
      }
      .underText{
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
      }
    }
  }
  .desc-content{
    width:88%;
    margin:0 auto;
    background: #EDEDED;
    border-radius: 10rpx;
    padding: 16rpx 18rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    .orage{
      color:#FF6A47;
    }
  }
}

.bottom {
  background: #fff;
  padding: 20rpx 24rpx 40rpx;

  .text1 {
    font-size: 34rpx;
    color: #ff6a47;
  }

  .text2 {
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
  }

  .pay_btn {
    width: 300rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #2f80ed;
    border-radius: 49px;
    color: white;
  }
}
</style>